<template>
<div class="layout">
	<Row>
		<Col span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>

		<Col span="6">
			<Input v-model="key" clearable>
				<Select v-model="filterKey" slot="prepend" style="width: 80px">
					<Option v-for="item in keyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</Input>
		</Col>
		<Col span="3">
			<Input v-model="realname" clearable placeholder="请填写用户名称" readonly :style="{paddingLeft:'15px'}">
				<Icon type="md-search" slot="suffix" @click.native="onSelectUser"></Icon>
			</Input>
		</Col>
		<Col span="3">
			<Select  clearable  placeholder="请选择状态" v-model="statusKey" :style="{paddingLeft:'15px'}">
				<Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</Col>
		<Col span="8">
			<span :style="{paddingLeft:'15px'}"></span>
			<Button type="primary" @click="search">搜索</Button>
			<Button type="info" @click="init()"><Icon type="md-refresh" :size="16"/></Button>
		</Col>
		<Col span="4">
			<div style="text-align:right">
				<Button type="primary" icon="md-add" :to='{"name":"welisten-talk-create"}'>新增</Button>
			</div>
		</Col>

		<Col span="24">
			<div class="cleaner10"></div>
			<Table ref="vTable" :loading="tableLoading" border stripe :columns="columns" :data="commentData.data">
				<!-- 操作 -->
				<template slot="action" slot-scope="props">
					<Button type="success" size="small" @click.native="onRowEdit(props.params.row.id)">编辑</Button>

					<Button type="primary" size="small"  @click.native="changeStatus(props.params.row.id,1,props.params.index)"
					:style="{display:0==props.params.row.status|| 2==props.params.row.status?'inline-block':'none'}">正常</Button>

					<Button type="warning" size="small" @click.native="changeStatus(props.params.row.id,2,props.params.index)"
					:style="{display:1==props.params.row.status?'inline-block':'none'}">关闭</Button>

					<Button type="error" size="small" ghost @click.native="onRowDelete(props.params.row.id,props.params.index)">关闭</Button>
				</template>
			</Table>
			<div class="cleaner10"></div>
			<Page @on-page-size-change="changePageSize" @on-change="changePage" :total="commentData.total" :page-size="commentData.pageSize" :current.sync="commentData.page" :transfer="true" show-elevator show-sizer></Page>
		</Col>
	</Row>

	<Listener-Selector  :show.sync="showBox" @on-hide="showBox=false" @on-change="onListenerChange"></Listener-Selector>
	
	<Modal v-model="showDetail" title="详情" cancel-text="">
		<div v-html="currentContent"></div>
    </Modal>
</div>
</template>
<script>


// 引入子组件
import ListenerSelector from '@/components/ListenerSelector/ListenerSelector.vue'
import {mapState,mapGetters} from 'vuex'
import { Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input } from 'iview';
import { isNullOrUndefined } from 'util';
export default { 
	name:'welisten-talk-index',
	components: {ListenerSelector,Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input},
	data () {
		return {
			title:'说说管理',
			tableLoading:true,
			commentData:[],
			showBox:false,
			currentContent:'',
			showDetail:false,
			statusKey:'',
			statusList: [
				{value: 0,label: '暂存'},
				{value: 1,label: '正常'},
				{value: 2,label: '关闭'},
			],
			uidKey:null,
			realname:'',
			filterKey:'',
			key:'',
			keyList: [
				{value: 'memo',label: '备注'},
			],
			columns:[
				{title: '编号',key: 'id',width: 90,fixed: 'left'},
				{title: '真实姓名',key: 'nickname'},
				{title: '状态',key: 'status',
					render: (h, params) => {
						let _status=['暂存','正常','关闭']
						return h('div',[
							h('span', {
							class: 1==params.row.status?'success':(2==params.row.status?'warning':(3==params.row.status?'error':'draft')),
						}, _status[params.row.status]),
						])
					}
				},
				{title: '排序',key: 'sequence', sortable: true},
				{title: '回复数量',key: 'reply_qty'},
				{title: '最佳回复',key: 'best_reply_id',
					render: (h, params) => {
						return h('div',[
							h('Button', {
								props: {
									type: 'text',
									ghost: true,
									to:{path:'/welisten/talk/edit/'+params.row.best_reply_id}
								},
								style:{color:'#515a6e',display:params.row.best_reply_id>0?'inline-block':'none'}
						}, '查看'),
						])
					}
				},
				{title: '说说',key: 'content',
					render: (h, params) => {
						return h('div',[
							h('Button', {
								props: {
									type: 'text',
									ghost: true,
									
								},
								on:{
									click:()=>{
										this.currentContent=params.row.content
										this.showDetail=true
									}
								},
								style:{color:'#515a6e'}
						}, '查看'),
						])
					}
				},
				{title: '备注',key: 'memo'},
				{
					title: '动作',
					key: 'action',
					align: 'left',
					fixed: 'right',
					width:220,
					render: (h, params) => {
						return h(
							'div',
							this.$refs.vTable.$scopedSlots.action({ 'params': params })
						)
					}
				}

			],
		}
	},
	methods:{
		init:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/welisten/talks",{params: { 'token': self.token }})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				self.$Message.error(error.message)
				self.tableLoading=false
			})
		},
		changePage:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/welisten/talks",{params: { 'token': self.token, page:self.commentData.page, pageSize: self.commentData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info(error.message);
				self.tableLoading=false
			})
		},
		changePageSize:function(val){
			let self=this
			self.commentData.pageSize=val
			self.tableLoading=true
			self.$http.get("/v1/welisten/talks",{params: { 'token': self.token, page:1, pageSize: self.commentData.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})
		},
		changeStatus:function(uid,statusId,index){
			let self=this
			self.tableLoading=true
			self.$http.post("/v1/welisten/talks?_method=put&token="+self.token,{'id':uid,'data':'{"status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				self.tableLoading=false
				if(200==response.data.status && 0==response.data.code)
				{
					if(3==statusId){self.commentData.data.splice(index,1)}
					else{self.commentData.data[index].status=statusId}
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message)
					self.init()
				}
			}).catch(function(error){
				self.$Message.error( error.message)
				self.tableLoading=false
			})
		},
		search:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/welisten/talks",{params: { 'token': self.token, page:1, pageSize: self.commentData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey,uid:self.uidKey}
			}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})

		},
		onSelectUser:function(){
			this.showBox=true
		},
		onListenerChange:function(obj){
			this.uidKey=obj.uid
			this.realname=obj.nickname
		},
		onRowEdit(id){this.$router.push({path:'/welisten/talk/edit/'+id})},
		onRowDelete(id,index){
			this.$Modal.confirm({
				title: '温馨提示',
				content: '删除后不可恢复，确认删除？',
				onOk: () => {
					this.changeStatus(id,3,index)
				},
			})
		},
	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
		// this.init()
	},
	computed:{
		...mapGetters(['token']),
	},
	watch:{
		realname(curVal,oldVal){
			if(''==curVal){this.uidKey=null}
		}
	}
}



</script>
<style lang="less" scoped>
</style>